<template>
  <view>
    <view class="list">
      <view class="listInside" v-for="(item, keys) in tilteRow" :key="keys">
        <view class="listTop">{{ item }}</view>

        <!-- <view>{{ keys }}</view> -->
        <view v-html="articleRow[keys]"></view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {},
  data() {
    return {
      query: {
        row: "",
        page: "",
      },
      menu: "",
      color: "black",

      //   详情页名称，数据
      articleRow: [],
      tilteRow: [],
    };
  },

  onLoad(option) {
    // console.log(option.row); //打印出上个页面传递的参数。
    this.query.row = option.row;
    this.query.page = option.page;
    this.menu = require("../../static/json/json_shengjing" +
      this.query.row +
      ".json");

    this.tilteRow = this.menu["tilteRow" + this.query.page];
    // this.tilteRow = JSON.parse(this.tilteRow);
    this.articleRow = this.menu["articleRow" + this.query.page];
    // this.articleRow = JSON.parse(this.articleRow);

    this.tilteRow = this.tilteRow.substr(1);
    this.tilteRow = this.tilteRow.substr(0, this.tilteRow.length - 1);
    this.tilteRow = this.tilteRow.replace(/[']/g, "");
    this.tilteRow = this.tilteRow.split(",");
    //检测是不是数组的实例

    this.articleRow = this.articleRow.substr(1);
    this.articleRow = this.articleRow.substr(0, this.articleRow.length - 1);
    this.articleRow = this.articleRow.split("</p>,");
    this.articleRow.forEach((element) => {
      element = element.concat("</p>");
    });
    // console.log(this.articleRow);

    // for (let index = 0; index < this.articleRow.length; index++) {
    //   console.log(this.articleRow[index]);
    // }

    // console.log(this.menu["tilteRow" + this.query.page]);
    // console.log(this.menu["articleRow" + this.query.page]);
  },

  methods: {
    Toarticle(page) {
      // console.log(page);

      uni.navigateTo({
        url:
          "../detail/chapter?row=" +
          this.query.row +
          "&page=" +
          Number(page + 1),
      });
    },
  },
};
</script>

<style scoped>
.list {
  padding: 20upx;
}
.listInside {
  margin-top: 20upx;
}
.listTop {
  color: #63eaad;
  font-size: larger;
}
.grid-text1 {
  /* width: 20%; */
  margin: 10upx 26upx;
  text-align: center;
}
</style>
